<template>
  <div class="home-page">
    <el-row class="width-100">
      <el-col :span="8" class="width-30">
        <el-timeline class="width-100">
          <el-timeline-item
              v-for="(activity, index) in newsList"
              :key="index"
              :timestamp="activity.time"
              @click="handleNewsClick(activity)"
          >
            {{ activity.title }}
          </el-timeline-item>
        </el-timeline>
        <!-- 分页器 -->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @current-change="initNews"
            @size-change="handler"
        />
      </el-col>
      <el-col :span="4"></el-col>
      <el-col :span="12" class="width-70">
        <el-descriptions
            class-name="width-100"
            :column="1"
            size="default"
        >
          <el-descriptions-item label="新闻标题：" min-width="100%"> {{ activeNews.title }}</el-descriptions-item>
          <el-descriptions-item min-width="100%"><img class="news-image" :src="activeNews.img" :alt="activeNews.title"/>
          </el-descriptions-item>
          <el-descriptions-item label="内容：" min-width="100%">
            <div v-html="activeNews.content"></div>
          </el-descriptions-item>
          <el-descriptions-item label="发布时间：" min-width="100%">{{ formatTime(activeNews.time) }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>


</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import {apiGet} from "@/utils/api";
import {useRoute} from "vue-router";
import {formatTime} from "@/utils/time.ts";
//默认页码
const pageNo = ref<number>(1)
//一页展示几条数据
const pageSize = ref<number>(5)
//总个数
const total = ref<number>(0)
const $route = useRoute();
const activeNews = reactive({
  newsId: 0,
  title: '',
  content: '',
  img: '',
  time: new Date(),
})
const newsList = ref([]);
//初始化新闻
const initNews = async (pager = 1) => {
  //收集当前页码
  pageNo.value = pager
  let parameter = {
    page: pageNo.value,
    limit: pageSize.value,
  }
  const {data} = await apiGet("/sportsNews/findAll", parameter);
  total.value = data.count
  //遍历新闻列表，将数据添加到newsList中
  data.data.forEach((item) => {
    item.time = formatTime(item.time)
    newsList.value.push(item)
  })
  if (data.data.length) {
    activeNews.newsId = data.data[0].newsId
    activeNews.img = data.data[0].img
    activeNews.title = data.data[0].title
    activeNews.time = data.data[0].time
    activeNews.content = data.data[0].content
  }
}

//分页器下拉菜单的自定义事件的回调
const handler = () => {
  initNews()
}

//点击某一个新闻事件
const handleNewsClick = (item) => {
  activeNews.newsId = item.newsId
  activeNews.img = item.img
  activeNews.title = item.title
  activeNews.time = item.time
  activeNews.content = item.content
};

const getOneByid = async () => {
  const id = $route.query.id;
  if (!id) {
    return;
  }
  const {data} = await apiGet('/sportsNews/getById', {id});
  handleNewsClick(data);
}

//组件挂载完毕
onMounted(async () => {
  await initNews()
  await getOneByid();
})
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.width-100 {
  width: 100%;
}

.width-30 {
  width: 30%;
}

.width-70 {
  width: 70%;
}

:deep(.news-image) {
  width: 100px !important;
  height: 100px !important;
}
</style>